<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/themes/metro/easyui.css" />
    <link rel="stylesheet" href="./lib/themes/icon.css" />
    <style>
        *{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="app" > 
        <ko-layout id="layout" style="display: block; height: 100%;" >
            <div id="p" data-options="region:'west'" title="West" style="width:30%;">
                <p>width: 30%</p>                
                <button type="button" data-bind="click:addLayout">addLayout</button>
                <button type="button" data-bind="click:removeLayout">removeLayout</button>
            </div>
            <div data-options="region:'center'" title="Center">
            </div>
            <div data-options="region:'east'" title="east" style="width:10%;">
                east
            </div>
        </ko-layout>
    </div>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.easyui.min.js"></script>
    <script src="./lib/locale/easyui-lang-zh_CN.js"></script>
    <script src="./lib/knockout-3.5.0.js" ></script>
    <script src="/koeasyui.js"></script>
    <script>
        koeasyui.use(window.ko); 
        var rootVm={
            addLayout:function(){
                var $layout = koeasyui.getContextFor(document.getElementById('layout')); 
                $layout.add({
                    region:'east',
                    width: '10%',
                    title: 'east',
                    content: '<ko-textbox params="options:{value:val}" ></ko-textbox><button data-bind="click:beforeMount" ></button>',
                    //只支持对象
                    viewModel:{
                        val: ko.observable('test'),
                        beforeMount: function(){
                            debugger;
                        }
                    }
                });
            },
            removeLayout:function(){
                var $layout = koeasyui.getContextFor(document.getElementById('layout')); 
                $layout.remove('east');
            }
        };
        ko.applyBindings(rootVm, document.getElementById('app'));
    </script>
</body>
</html>